<template>
  <!-- business-analysis  经营分析界面 -->
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/list-shop' }">店铺列表</el-breadcrumb-item>
      <el-breadcrumb-item>经营分析</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-button type="primary"
      @click="$router.push('/list-shop')">返回店铺列表</el-button>

      <div class="dif">
        <div class="flex">
          店铺编号：<span>2514854</span>
        </div>
        <div class="flex">
          店铺名称：<span>美宜佳-保利店</span>
        </div>
      </div>
      <div class="dif">
        <div class="flex">
          行业：<span>零售</span>
        </div>
        <div class="flex">
          联系电话：<span>18177492510</span>
        </div>
      </div>
      <hr>
        <div class="dif">
        <div>
          <div>
            <span class="spanTime">日期 :</span>
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            </div>
        </div>
        </div>
        <div class="dif2">
          <strong class="flex">销售额：xxxx.xx元</strong>
          <strong class="flex">总订单量：xxxx.xx元</strong>
        </div>

      <div class="dif2">
        <div class="flex">
        <div class="dif">店铺销售情况</div>
        <div id="echarts" :style="{width: '400px', height: '300px'}"></div>
        </div>
        <div class="flex">
        <div class="dif">店铺消费情况</div>
        <div id="echarts2" :style="{width: '400px', height: '300px'}"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
    }
  },
  created () {
    // this.getShopAnalyze()
  },
  mounted () {
    var dom = document.querySelector('#echarts')
    var myChart = this.echarts.init(dom)
    // 绘制图表
    myChart.setOption({
      series: [
        {
          name: '销售情况',
          type: 'pie',
          radius: '55%',
          data: [{
            value: 235,
            name: '零售'
          },
          {
            value: 274,
            name: '日常用品'
          },
          {
            value: 310,
            name: '淘宝'
          },
          {
            value: 335,
            name: '活动'
          },
          {
            value: 400,
            name: '酒水'
          }
          ]
        }
      ]
    })
    var dom2 = document.querySelector('#echarts2')
    var myChart2 = this.echarts.init(dom2)
    // 绘制图表2
    myChart2.setOption({
      series: [
        {
          name: '水电费',
          type: 'pie',
          radius: '55%',
          data: [{
            value: 235,
            name: '食材'
          },
          {
            value: 274,
            name: '进货'
          },
          {
            value: 310,
            name: '野味'
          },
          {
            value: 335,
            name: '消防检测'
          },
          {
            value: 400,
            name: '活动宣传'
          }
          ]
        }
      ]
    })
  },
  methods: {
    // 获取 店铺经营分析
    // async getShopAnalyze () {
    //   const { data: res } = await this.$http.get('shops/analyze', { params: this.queryshop })
    //   console.log(res)
    //   if (res.meta.status !== 200) return this.$message.error('获取店铺列表失败')
    //   this.$message.success('获取店铺详情成功')
    // }
  }
}
</script>

<style scoped lang="less">
.dif{
  display: flex;
  width: 80%;
  margin: 16px 0;
  .flex{
    flex:1;
  }
}
.spanTime{
  margin-right:10px;
  line-height: 40px;
}
.strong{
  font-size: 28px;
}

.dif2{
  display: flex;
  width: 100%;
  // margin: 10px 0;
  .flex{
    flex:1;
  }
}
</style>
